{% extends 'shop/base.html' %}
{% load staticfiles %}
{% load bootstrap3 %}
{% load fullcalendar_tags %}
{% block css %}
        {% fullcalendar_css %}
        {% fullcalendar_print_css %}
<link rel="stylesheet" type="text/css" href="{% static 'engine/css/bootstrap-datetimepicker.min.css' %}">
{% endblock css %}
{% block js %}
        {% fullcalendar_jquery %}
        {% fullcalendar_jquery_ui %}
        {% fullcalendar_javascript %}
{% calendar_init calendar_config_options%}
<script type="text/javascript" src="http://cdn.bootcss.com/moment.js/2.10.2/moment.min.js"></script>
<script type="text/javascript" src="{% static 'engine/js/bootstrap-datetimepicker.js' %}"></script>
<script type="text/javascript">
$('#date-start').datetimepicker({
  autoclose : true
    });
$('#date-end').datetimepicker({
        autoclose : true
    });
</script>
{% endblock js %}

{% block content %}
<h2>事件日历 </h2>
    <button type="button" class="btn btn-info btn-raised " data-toggle="modal" data-target="#myModal">添加事件</button>
<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <form method="post" action="{% url 'calendar' %}">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">添加事件</h4>
          </div>
          <div class="modal-body">
            {% csrf_token %}
                {% bootstrap_field form.title %}
            <div class="input-append date" id="date-start" data-date="" data-date-format="yyyy/mm/dd hh:ii">
                  {% bootstrap_field form.start %}
              <span class="add-on">
                <i class="icon-th"></i>
            </span>
            </div>
             <div class="input-append date" id="date-end" data-date="" data-date-format="yyyy/mm/dd hh:ii">
              {% bootstrap_field form.end %}
              <span class="add-on">
                <i class="icon-th"></i>
            </span>
          </div>
          <div class="togglebutton">
              <label>
                  <input type="checkbox" checked="" name="all_day" id="id_all_day"><span class="toggle"></span> 全日事件
              </label>
          </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-dismiss="modal">取消</button>
            <button type="submit" class="btn btn-primary">保存</button>
          </div>
      </form>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

{% load fullcalendar_tags %}

    {% calendar %}
 {% endblock content%}
